<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="css.jsp"/>

<style lang="css">
    .admin-form-line {
        padding-top: calc(.375rem + 1px);
        padding-bottom: calc(.375rem + 1px);
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark">

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-
                        target="#bs-example-navbar-collapse-1">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="adminList.ancientPainting">首页</a>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <%-- <ul class="navbar-nav">--%>
                    <%--     <li class="nav-item active">--%>
                    <%--         <a class="nav-link" href="#">分类</a>--%>
                    <%--     </li>--%>
                    <%--     <li class="nav-item">--%>
                    <%--         <a class="nav-link" href="#">热销商品</a>--%>
                    <%--     </li>--%>
                    <%-- </ul>--%>
                    <form id="search-form" class="form-inline" action="search.ancientPainting" style="margin: auto 0">
                        <input class="form-control mr-sm-2" type="text" name="name"/>
                        <select class="form-control mr-sm-2 form-control-placeholder" name="catalogName">
                            <option value="" disabled selected hidden>请选择</option>
                            <c:if test="${!empty catalogs}">
                                <c:forEach items="${catalogs}" var="theme" varStatus="vs">
                                    <option value="${theme.name}" style="color: black">${theme.name}</option>
                                </c:forEach>
                            </c:if>
                        </select>
                        <button class="btn btn-dark my-2 my-sm-0" type="submit">
                            搜索
                        </button>
                        <button class="btn btn-outline-light my-2 my-sm-0" type="button" onclick="resetSearchForm()">
                            重置
                        </button>
                    </form>
                    <ul class="navbar-nav ml-md-auto">
                        <li class="nav-item active">
                            <a class="nav-link" id="admin-btn"> <c:if test="${! empty admin}"> 管理员-${admin.name}已登录 </c:if></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="logout.admin">注销 </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

<%--用户信息查看--%>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">个人信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="#">
                    <div class="form-group row login-container-field">
                        <label class="col-sm-2 col-form-label">姓名</label>
                        <div class="col-sm-10 admin-form-line">
                            <c:if test="${! empty admin}">${admin.name} </c:if>
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label class="col-sm-2 col-form-label">用户名</label>
                        <div class="col-sm-10 admin-form-line">
                            <c:if test="${! empty admin}">${admin.username} </c:if>
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label class="col-sm-2 col-form-label">角色</label>
                        <div class="col-sm-10 admin-form-line">
                            管理员
                        </div>
                    </div>
                    <div class="form-group row login-container-field">
                        <label class="col-sm-2 col-form-label">年龄</label>
                        <div class="col-sm-10 admin-form-line">
                            <c:if test="${! empty admin}">${admin.age} </c:if>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">好的</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        <%--点击用户名，打开模态框查看用户信息--%>
        $("#admin-btn").click(function (event) {
            $("#staticBackdrop").modal('show');
        });
    });

    function resetSearchForm() {
        document.getElementById("search-form").reset();
        $("#search-form").submit();
    }
</script>